<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户地区统计图</title>
</head>
<body style="height: 500px; margin:10px 0;">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" th:src="@{/static/echarts/echarts.min.js}"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $.get("/stat/loadCustomerAreaStatJosn",function(data) {
       var dom = document.getElementById("container");
       var myChart = echarts.init(dom);
       var app = {};
       option = null;
       option = {
           title : {
               text: '易卖客户地区地址统计',
               subtext: '真实有效',
               x:'center'
           },
           tooltip : {
               trigger: 'item',
               formatter: "{a} <br/>{b} : {c} ({d}%)"
           },
           legend: {
               orient: 'vertical',
               left: 'left',
               data: data
           },
           series : [
               {
                   name: '客户数量(占比)',
                   type: 'pie',
                   radius : '55%',
                   center: ['50%', '60%'],
                   data: data,
                   itemStyle: {
                       emphasis: {
                           shadowBlur: 10,
                           shadowOffsetX: 0,
                           shadowColor: 'rgba(0, 0, 0, 0.5)'
                       }
                   }
               }
           ]
       };
       if (option && typeof option === "object") {
           myChart.setOption(option, true);
       }
   })
</script>
</body>
</html>